<!-- 人员调整 -->
<template>
  <div class="module_">
    <div class="mb8 search_box">
      <search  @clearSearch='clearSearch'>
        <el-form label-width='80px' inline autocomplete="off"  :model="pageparm" class="search_box">
          <el-form-item label="科室" v-if="adminShow">
            <inputSearch type='departments' ref="departmentSearch"  @onChange="searchChange($event,'belong_department_id')" />
          </el-form-item>
          <el-form-item label="姓名">
            <inputSearch ref="inputSearch"  @onChange="searchChange($event,'employees_id')" />
          </el-form-item>
          <el-form-item label="工号">
            <el-input placeholder="输入工号搜索" v-model="pageparm.code" clearable />
          </el-form-item>
          <el-form-item label="系统角色">
            <el-select size="medium" v-model="pageparm.roles_id"  placeholder="请选择系统角色搜素" @change="searchChange($event,'roles_id')">
              <el-option
                v-for="(item) in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>  
      </search>
    </div>
    <el-table
      style="width:901px"
      :data="tableData"
      size="medium"
      class="flex-1"
      height="150"
      border
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange"
      > 
      <el-table-column
        align="center"
        prop="belong_department_id"
        label="所属科室"
        width="200"
        sortable="custom"
        >
        <template slot-scope="scope">
          {{scope.row.department?scope.row.department.name:''}}
        </template>
        <!-- sortable="custom" -->
      </el-table-column>
      <el-table-column
        align="center"
        prop="employees_id"
        label="职员名称"
        width="200"
        sortable="custom"
        >
        <template slot-scope="scope">
          {{scope.row.employee?scope.row.employee.name:''}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="employee.code"
        label="职员工号"
        width="150"
        >
      </el-table-column>
      <el-table-column
        align="center"
        prop="roles_id"
        label="系统角色"
        width="150"
        sortable="custom"
        >
        <template slot-scope="scope">
          {{scope.row.role?scope.row.role.name:''}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="medium" @click="handle(scope.$index, scope.row, 2)"
            >修改</el-button>
          <!-- <el-button
            size="medium"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

    <el-dialog
      class="dialog"
      :visible.sync="editFormVisible"
      width="350px"
      @click="editFormVisible = false"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      @close='dialogClose'>
      <h2 slot="title" class="tx-c">修改信息</h2>
      <el-form autocomplete="off"  label-width="85px" :model="editForm" class="form_flex">
        <el-form-item label="科室" class="tip">
          <inputSearch @onChange='editDepartment'  type='departments' ref="departments" />
        </el-form-item>
        <el-form-item label="职员" class="tip">
          <inputSearch  @onChange='editChange' :middleList='middleList' ref="em_r" />
        </el-form-item>
        <el-form-item label="系统角色" class="tip">
          <el-select size="medium" v-model="editForm.roles_id"  placeholder="请选择系统角色">
            <el-option
              v-for="(item) in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  ApiemployeerolesAdd,
  Apiemployees,
  ApiemployeesChangePut,
  ApiemployeesDel,
  Apiroles
} from "@/api";
import { debounce,adminShow } from "@/utils";
import {mapState,mapActions} from 'vuex'
import inputSearch from '@/components/inputSearch.vue'
export default {
  components: {
    inputSearch,
  },
  data() {
    return {
      adminShow: adminShow(),
      tableData: [],
      editFormVisible: false,
      editForm: {}, //修改
      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: "updated_at",
        sort_order: "desc",
        employees_id:null,
        code:null,
        departments_id: null
      },
      tableLoading: false,

      btnLoading: false,

      middleList: [],   //员工回显
      roleList: [],
    };
  },
  mounted() {
    this.getList();
    setTimeout(()=>{
      Apiroles({allPage:2}).then(({data}) => {
        this.roleList = data
      })
    },100)
  },
  methods: {
    dialogClose(){
      this.$refs.em_r.clear()
    },
    tableSortChange(column) {
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList();
    },
    //搜索
    clearSearch(){
      this.$refs.inputSearch.clear()
      if(this.adminShow) this.$refs.departmentSearch.clear()
    },
    searchChange(id,val){
      this.pageparm.page = 1
      this.pageparm[val] = id
      this.getList()
    },
    //分页
    callFather(pageparm) {
      this.pageparm.page = pageparm.page;
      this.pageparm.perPage = pageparm.perPage;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      Apiemployees(this.pageparm).then(({ data, page }) => {
          this.tableData = data || [];
          this.pageparm.total = page.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    //编辑
    handle(index, value, i) {
      let department_id = value.belong_department_id || null;
      this.editForm = {
        employees_id: value.employees_id,
        departments_id: department_id,
        roles_id: value.roles_id,
      }
      this.editFormVisible = true
      this.$nextTick(()=>{
        this.$refs.departments.departments_id = department_id
        this.middleList = [{employee:{name:value.employee.name},employees_id: value.employees_id}]
      })
    },
    editChange(id){
      this.editForm.employees_id = id
    },
    editDepartment(id){
      this.editForm.departments_id = id
    },

    deleteUser(index, value) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          ApiemployeesDel(value.id).then((res) => {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }).finally(()=>{
            loading.close()
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submit: debounce(function () {
      //提交  修改或新增
      if (!this.editForm.employees_id || !this.editForm.departments_id || !this.editForm.roles_id) {
        this.$message.error("请输入全部信息");
        return;
      }
      this.btnLoading = true
      // if (this.change_id) {
        //有ID就是修改
        ApiemployeesChangePut(this.editForm,this.editForm.employees_id)
          .then((res) => {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.editFormVisible = false;
            this.getList();
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "修改失败!",
            });
          }).finally(()=>{
            this.btnLoading = false
          });
      // } else {
        // ApiemployeerolesAdd(options)
        //   .then((res) => {
        //     this.$message({
        //       type: "success",
        //       message: "添加成功!",
        //     });
        //     this.editFormVisible = false;
        //     this.getList();
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "error",
        //       message: "添加失败!",
        //     });
        //   }).finally(()=>{
        //     this.btnLoading = false
        //   });
      // }
    },500,true),
  },
};
</script>

<style lang='less' scoped>
.dialog {
  .el-col-12 {
    width: 70%;
  }
}
</style>